<extend name="Public/common"/>
<block name="style">
    <link type="text/css" rel="stylesheet" href="__LIB__/Swiper-3.4.2/css/swiper.min.css"/>
</block>
<block name="body">
<div id="main-container" class="container">

<div class="product-intro">
    <div class="row">
    <div class="col-md-5">
        <div class="product-pic-box">
            <div class="view">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <notempty name="product.thumb500">
                            <volist name="product.thumb500" id="thumb">
                                <div class="swiper-slide" data-id="{$i}"><img class="slide-img detail-nav-scale" src="{$thumb}"></div>
                            </volist>
                        <else />
                            <div class="swiper-slide"><img class="slide-img detail-nav-scale" src="{$product.main_pic}"></div>
                        </notempty>
                    </div>


                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev swiper-button-white"></div>
                    <div class="swiper-button-next swiper-button-white"></div> <!-- 白色 -->
                </div>
            </div>

            <div class="preview">
                <notempty name="product.thumb100">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                    <volist name="product.thumb100" id="thumb">
                        <div class="swiper-slide" data-id="{$i}"><img class="slide-img detail-nav-scale" src="{$thumb}"></div>
                    </volist>
                    </div>
                </div>
                </notempty>
            </div>
        </div>
    </div>
    <div class="col-md-7">
            <div class="product-desc-main">
                <section class="product-desc">
                <h3 class="title-section" data-type="title" data-id="{$product.id}">{$product['title']}</h3>
                <p>{$product['description']}</p>
                </section>
                <section class="price-section">
                    <span class="rmb">￥</span>
                    <span class="now-price price">
                        {$product.price}
                    </span>
                    <span class="ori-price price" style="text-decoration: line-through">
                        ￥{$product.ori_price}
                    </span>

                </section>
                <php>
                /*有规格，在规格里选择数量*/
                if(!empty($product['sku_table'])){
                </php>
                <section class="sku-content" data-id="{$product.id}">
                    <php>
                    foreach($product['sku_table']['table'] as $in => $table){
                    </php>
                        <dl class="sku-box clearfix">
                            <dt><php> echo $in </php></dt>
                            <dd>
                            <ul data-sku="<php> echo $in </php>">
                                <php>foreach($table as $t){</php>
                                    <li class="" data-table="<php> echo $in </php>" data-value="<php> echo $t </php>"><php> echo $t </php><i></i></li>
                                <php>}</php>
                            </ul>
                            </dd>
                        </dl>
                    <php>
                    }
                    </php>
                    <input type="hidden" >
                </section>
            <php>}</php>

            <section class="count-content clearfix">
                <div class="name">数量</div>
                <div class="sku-type count-box clearfix">
                    <button class="count-btn cut-btn big-text border-box">-</button>
                    <input class="count-input border-box" type="text" value="1" readonly>
                    <button class="count-btn add-btn big-text border-box">+</button>
                </div>

                <div class="repertory-box">
                    <div class="quantity">剩余库存：(<span>{$product['quantity']}</span>)</div>
                </div>

            </section>

            <php>if(!empty($product['extra_info'])){</php>
                <section class="info-section linear-section vertical-box linear-noinput">
                    <span class="linear-title vertical-box">产品参数</span>
                <span class="linear-right vertical-box">
                    <span>
                        <img class="info-icon" src="__IMG__/go.png">
                    </span>
                </span>
                </section>
                <div class="info-content last-liner-section" style="display: none;">
                    <php>
                    foreach($product['extra_info'] as $info){
                    </php>
                        <p>
                            <span class="info-ukey"><php> echo $info['ukey'] </php></span>：
                            <span class="info-data"><php> echo $info['data'] </php></span>
                        </p>
                    <php>
                    }
                    </php>
                </div>
            <php>}</php>

            <section class="buybtn-content">
                <div class="">
                    <php>if($product['quantity']==0){</php>
                        <button class="btn btn-muushop color-disable">已经卖光啦</button>
                    <php>
                    }else{
                    </php>
                        <button class="buyImmediately sku-data btn btn-lg btn-warning btn-muushop">立即购买</button>
                        <button class="addCartNow sku-data btn btn-lg btn-warning btn-muushop">加入购物车</button>
                    <php>}</php>

                </div>
            </section>
            </div>
        </div>
    </div>
</div>

<div class="product-info-main">

    <div id="detail">
        <div class="tab-main clearfix">
            <ul class="nav nav-pills nav-tabs">
                <li class="active"><a data-tab href="#productContent">商品介绍</a></li>
                <li><a data-tab href="#service">售后保障</a></li>
                <li><a data-tab href="#comment">评价嗮图</a></li>
            </ul>
        </div>
    </div>
    <div class="tab-content detail-margin">
        <section id="productContent" class="tab-pane">
            <div class="html-box">
                {$product['content']}
            </div>
        </section>
        <section id="service" class="tab-pane">
            <div class="html-box">
                {$service}
            </div>
        </section>
        <section id="comment" class="tab-pane">
            <div class="html-box">
                <div class="row list-box">
                    正在加载中...
                </div>
                <div class="page-box">
                    <span class="now_page hidden"></span>
                    <ul class="pager" data-ride="pager" data-elements="nav" data-rec-total="1000" data-max-nav-count="6">
                    </ul>
                </div>
            </div>
        </section>
    </div>
</div>
</div>
<!--隐藏域-->
<input type="hidden" data-toggle="product_id" value='{$product.id}' />
<input type="hidden" data-toggle="product_sku" value='{$product_sku}' />
<input type="hidden" data-toggle="add_cart_url" value='{:U("muushop/cart/add_to_cart")}' />

<!--引入JS-->
<script src="__JS__/common.js"></script>
<script src="__JS__/sku/sku.js"></script>
<script src="__LIB__/Swiper-3.4.2/js/swiper.jquery.min.js"></script>
<script src="__JS__/product.js"></script>
<script>

</script>
</block>